<template>
<el-container>
  <el-header>
        <div class="searchcontent">
            <el-select v-model="value" placeholder="请选择" class="choice">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入查询内容" class="searchinput"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
        </div>
  </el-header>
  <el-main >
      <div class="messageFrom">
		<el-table :data="tableData" height="600px" border style="width: 100%">
        <el-table-column prop="ISBN" label="图书编号" width="180">
        </el-table-column>
        <el-table-column prop="bookName" label="书籍名称" width="180">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="press" label="出版社"width="180">
        </el-table-column>
         <el-table-column prop="synopsis" label="简介" width="280">
        </el-table-column>
         <el-table-column prop="state" label="是否借出" width="80">
        </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">借书</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

  </el-main>
</el-container>
	
</template>
<script>
export default {
  name: "BookSearch",
  data() {
    return {
      tableData: [],
      options: [
        {
          value: "ISBN",
          label: "书编号"
        },
        {
          value: "bookName",
          label: "书名"
        },
        {
          value: "author",
          label: "作者"
        },
        {
          value: "press",
          label: "出版社"
        }
      ],
      value: "",
      input: "",
    };
  },
  //   mounted: function() {
  //       this.createdAlluser()
  //   },
  created: function() {},
  methods: {
    table: function() {
      var params = new URLSearchParams();
      params.append('searchname', this.input);
      params.append('num', this.value);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/booksearch.do",
        data: params
      })
        .then(response => {
          var data = [];
          for (var i = 0; i < response.data.data.length; i++) {
            var dataone = {};
            dataone.ISBN = response.data.data[i].ISBN;
            dataone.author = response.data.data[i].author;
            dataone.synopsis = response.data.data[i].synopsis;
            dataone.state = response.data.data[i].state;
            dataone.Remarks = response.data.data[i].Remarks;
            dataone.press = response.data.data[i].press;
            dataone.cno = response.data.data[i].cno;
            dataone.bookName = response.data.data[i].bookName;

            if(dataone.state == false)
            {
                dataone.state = '未借出';
            }else{
                dataone.state = '已借出';
            }

            data.push(dataone);
          }
          this.tableData = data;

            if( response.data.data.length == 0)
            {
                alert("没有搜索到你想要的书籍");
            }
          console.log(response.data.data);
          console.log(response.data.code);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    inf: function() {
      console.log(this.tableData);
    },
    search: function(){
        console.log(this.value+ this.input)
        if(this.value =="" ||this.input == "")
        {
            alert("请选择你要输入的值")
        }else{
            this.table();
        }
    },
    handleEdit(index, row) {
        console.log(index, row);
        var params = new URLSearchParams();
      params.append('username', this.$store.state.token);
      params.append('IBSN', row.ISBN);
      this.$axios({
        method: "post",
        url: "http://localhost:8080/borrowBook.do",
        data: params
      })
        .then(response => {
          if(response.data.success == "true")
          {
            alert("借书成功");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      this.$forceUpdate();
    },
    handleDelete(index, row) {
        console.log(index, row);
          this.$alert(row.synopsis, '书本简介', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
    }
  }
};
</script>

<style scoped>
.messageFrom {
  width: 100%;
  height: 100%;
}
.content {
  width: 500px;
  height: 100%;
  max-height: 500px;
  margin: 0 auto;
}
.searchcontent{
    width: 100%;
}
.choice{
  float: left;
  width: 180px;
}
.searchinput{
    width: 250px;
    float: left;
    margin-left: 50px;
}
</style>
